<template>
  <basic-container>
    <div class="header">
      <el-form label-width="100px" :inline="true" :rules="rules" @submit.native.prevent>
        <el-form-item v-if="activeName === '序列号追溯'" label="序列号:" prop="sequenceNumber">
          <el-input name="sequenceNumber" v-model="sequenceNumber" :clearable="true" @keydown.enter.native="onSubmit"></el-input>
        </el-form-item>
        <el-form-item v-if="activeName === '工单追溯'" label="工单号:" prop="workOrderNo">
          <el-input name="workOrderNo" v-model="workOrderNo" :clearable="true" @keydown.enter.native="onSubmit">
            <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-divider>基础信息</el-divider>
    <div id="workOrderInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowWorkOrderData')">
          <h4>工单信息</h4>
          <i :class="[isShowWorkOrderData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ workOrderData.length }}条记录</span>
    </div>
    <avue-crud v-show="isShowWorkOrderData" :option="workOrderOption" :table-loading="workOrderLoading" :data="workOrderData"></avue-crud>
    <div id="deliveryInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowDeliveryData')">
          <h4>发货信息</h4>
          <i :class="[isShowDeliveryData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ deliveryData.length }}条记录</span>
    </div>
    <avue-crud v-show="isShowDeliveryData" :option="deliveryOption" :table-loading="deliveryLoading" :data="deliveryData"></avue-crud>
    <div v-if="activeName === '序列号追溯'" id="associationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowAssociationData')">
          <h4>关联信息</h4>
          <i :class="[isShowAssociationData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ associationData.length }}条记录</span>
    </div>
    <transition v-if="activeName === '序列号追溯'">
      <avue-crud v-show="isShowAssociationData" :option="associationOption" :table-loading="associationLoading" :data="associationData"></avue-crud>
    </transition>
    <div id="passingStationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowPassingStationData')">
          <h4>过站信息</h4>
          <i :class="[isShowPassingStationData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ passingStationData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowPassingStationData"
      :option="passingStationInfoOption"
      :table-loading="passingStationLoading"
      :page.sync="passingStationPage"
      :data="passingStationData"
      @current-change="passingStationCurrentChange"
      @size-change="passingStationSizeChange"
    ></avue-crud>
    <div id="usePartInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowUsePartData')">
          <h4>用料信息</h4>
          <i :class="[isShowUsePartData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <!-- <span>共{{ associationData.length }}条记录</span> -->
    </div>
    <el-tabs v-show="isShowUsePartData" v-model="usePartType" type="border-card">
      <el-tab-pane label="仓库发料" name="warehouseUsePart">
        <avue-crud
          :option="warehouseUsePartOption"
          :table-loading="warehouseUsePartLoading"
          :data="warehouseUsePartData"
          :page.sync="warehouseUsePartPage"
          @current-change="warehouseUsePartCurrentChange"
          @size-change="warehouseUsePartSizeChange"
        >
          <template slot-scope="{ row }" slot="menu">
            <el-button icon="el-icon-view" size="small" type="text" @click="warehouseUsePartDetailView(row)">详情</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane label="SMT用料" name="SMTUsePartInfo">
        <avue-crud
          :option="SMTUsePartInfoOption"
          :table-loading="SMTUsePartInfoLoading"
          :data="SMTUsePartInfoData"
          :page.sync="SMTUsePartInfoPage"
          @current-change="SMTUsePartInfoCurrentChange"
          @size-change="SMTUsePartInfoSizeChange"
        ></avue-crud>
      </el-tab-pane>
      <el-tab-pane label="DIP关键料" name="dipKeyMaterials">
        <avue-crud
          :option="dipKeyMaterialsOption"
          :table-loading="dipKeyMaterialsLoading"
          :data="dipKeyMaterialsData"
          :page.sync="dipKeyMaterialsPage"
          @current-change="dipUseMaterialsCurrentChange"
          @size-change="dipUseMaterialsSizeChange"
        >
          <template slot-scope="{ row }" slot="menu">
            <el-button icon="el-icon-view" size="small" type="text" @click="dipKeyMaterialsDetailView(row)">详情</el-button>
          </template></avue-crud
        >
      </el-tab-pane>
      <el-tab-pane label="组装关键料" name="assemblyKeyMaterials">
        <avue-crud
          :option="assemblyKeyMaterialsOption"
          :table-loading="assemblyKeyMaterialsLoading"
          :data="assemblyKeyMaterialsData"
          :page.sync="assemblyKeyMaterialsPage"
          @current-change="assemblyKeyMaterialsCurrentChange"
          @size-change="assemblyKeyMaterialsSizeChange"
        >
          <template slot-scope="{ row }" slot="menu">
            <el-button icon="el-icon-view" size="small" type="text" @click="assemblyKeyMaterialsDetailView(row)">详情</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>
    <div id="accessoriesInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowAccessoriesData')">
          <h4>辅料信息</h4>
          <i :class="[isShowAccessoriesData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ accessoriesData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowAccessoriesData"
      :option="accessoriesInfoOption"
      :table-loading="accessoriesLoading"
      :page.sync="accessoriesPage"
      :data="accessoriesData"
      @current-change="accessoriesCurrentChange"
      @size-change="accessoriesSizeChange"
    ></avue-crud>
    <div id="equipmentInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowEquipmentData')">
          <h4>设备信息</h4>
          <i :class="[isShowEquipmentData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ equipmentData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowEquipmentData"
      :option="equipmentInfoOption"
      :table-loading="equipmentLoading"
      :page.sync="equipmentPage"
      :data="equipmentData"
      @current-change="equipmentCurrentChange"
      @size-change="equipmentSizeChange"
    >
      <template slot-scope="{ row }" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="equipmentDetailView(row)">详情</el-button>
      </template>
    </avue-crud>
    <div id="maintenanceInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowMaintenanceData')">
          <h4>维修信息</h4>
          <i :class="[isShowMaintenanceData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ maintenanceData.length }}条记录</span>
    </div>
    <avue-crud v-show="isShowMaintenanceData" :option="maintenanceInfoOption" :table-loading="maintenanceLoading" :data="maintenanceData"></avue-crud>
    <div id="inspectionInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowInspectionData')">
          <h4>抽巡检信息</h4>
          <i :class="[isShowInspectionData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ inspectionData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowInspectionData"
      :option="inspectionInfoOption"
      :table-loading="inspectionLoading"
      :page.sync="inspectionPage"
      :data="inspectionData"
      @current-change="inspectionChange"
      @size-change="inspectionChange"
    ></avue-crud>
    <div v-if="activeName === '序列号追溯'" id="testInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowTestData')">
          <h4>测试信息</h4>
          <i :class="[isShowTestData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ testData.length }}条记录</span>
    </div>
    <transition v-if="activeName === '序列号追溯'">
      <avue-crud v-show="isShowTestData" :option="testInfoOption" :table-loading="testLoading" :data="testData"></avue-crud>
    </transition>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </common-modal-template>
    <div v-if="!sideNav" class="box-card-hide" @click="sideNav = true">
      <i class="el-icon-arrow-right"></i>
    </div>
    <el-card v-if="sideNav" class="box-card">
      <div slot="header" class="clearfix">
        <span>目录</span>
        <el-button style="float: right; padding: 3px 3px" type="info" icon="el-icon-close" circle @click="sideNav = false"></el-button>
      </div>
      <div class="catalogue">
        基础信息
        <ul>
          <li @click="goToLocation('#workOrderInfo')">工单信息</li>
          <li @click="goToLocation('#deliveryInfo')">发货信息</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#associationInfo')">关联信息</li>
        </ul>
        生产信息
        <ul>
          <li @click="goToLocation('#passingStationInfo')">过站信息</li>
          <li @click="goToLocation('#usePartInfo')">用料信息</li>
          <li @click="goToLocation('#accessoriesInfo')">辅料信息</li>
          <li @click="goToLocation('#equipmentInfo')">设备信息</li>
        </ul>
        品质信息
        <ul>
          <li @click="goToLocation('#maintenanceInfo')">维修信息</li>
          <li @click="goToLocation('#inspectionInfo')">抽巡检信息</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#testInfo')">测试信息</li>
        </ul>
      </div>
    </el-card>
  </basic-container>
</template>
<script>
import {
  getWorkOrderInfo,
  getDeliveryInfo,
  getAssociationInfo,
  getOverStationInfoBySn,
  getOverStationInfoByWorkOrderNo,
  getAccessoryInfo,
  getEquipmentInfo,
  getInspectionInfo,
  getMachineTestInfo,
  getWarehouseUsePart,
  getAssemblyKeyMaterials,
  getSMTUseMaterials,
  getDipUseMaterials,
  getRepairInfoBySn,
  getRepairInfoByWorkOrderNo
} from '@/api/product/dimensionDataBack';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
export default {
  props: {
    activeName: {
      type: String,
      default: ''
    }
  },
  components: {
    CommonModalTemplate
  },
  data() {
    return {
      sequenceNumber: '',
      workOrderNo: '',
      rules: {
        sequenceNumber: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ],
        workOrderNo: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ]
      },
      isShowWorkOrderData: true,
      isShowDeliveryData: true,
      isShowAssociationData: true,
      isShowPassingStationData: true,
      isShowUsePartData: true,
      isShowAccessoriesData: true,
      isShowEquipmentData: true,
      isShowMaintenanceData: true,
      isShowInspectionData: true,
      isShowTestData: true,
      sideNav: true,
      workOrderOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '生产批次',
            prop: 'lotNo'
          },
          {
            label: '工单计划数量',
            prop: 'planQuantity'
          },
          {
            label: '工单完工数量',
            prop: 'completedQuantity'
          },
          {
            label: '生产时间',
            prop: 'productionTime'
          },
          {
            label: '工单类型',
            prop: 'orderType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '产品型号',
            prop: 'partModel'
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'lineNames'
          }
        ]
      },
      workOrderLoading: false,
      workOrderData: [],
      deliveryOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '发货单号',
            prop: 'no'
          },
          {
            label: '客户',
            prop: 'partner'
          },
          {
            label: '发货地址',
            prop: 'deliveryAddress'
          },
          {
            label: '发货人员',
            prop: 'consignor'
          },
          {
            label: '发货时间',
            prop: 'deliveryTime'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          }
        ]
      },
      deliveryData: [],
      deliveryLoading: false,
      associationOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '产品序列号',
            prop: 'productSn'
          },
          {
            label: '外部序列号',
            prop: 'externalSn'
          },
          {
            label: '组装父级序列号',
            prop: 'parentSn'
          },
          {
            label: '父级产品编码',
            prop: 'parentPartNo'
          },
          {
            label: '父级产品名称',
            prop: 'parentPartName'
          },
          {
            label: '父级产品型号',
            prop: 'parentPartModel'
          }
        ]
      },
      associationData: [],
      associationLoading: false,
      passingStationInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo',
            hide: false
          },
          {
            label: '工序名称',
            prop: 'processRouteName'
          },
          {
            label: '工序类型',
            prop: 'processRouteType',
            type: 'select',
            dicData: [
              {
                label: '过站工站',
                value: 'OVERSTATION'
              },
              {
                label: '组装工站',
                value: 'ASSEMBLY'
              },
              {
                label: '测试工站',
                value: 'TEST'
              },
              {
                label: '包装工站',
                value: 'PACKING'
              },
              {
                label: '老化工站',
                value: 'AGING'
              },
              {
                label: '报工工站',
                value: 'TIMESHEET'
              },
              {
                label: '上料工站',
                value: 'FEEDING'
              }
            ]
          },
          {
            label: '已过站数量',
            prop: 'passQuantity',
            hide: true
          },
          {
            label: '未过站数量',
            prop: 'waitingQuantity',
            hide: true
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'productionLineName'
          },
          {
            label: '设备编码',
            prop: 'workStationCode'
          },
          {
            label: '设备名称',
            prop: 'workStationName'
          },
          {
            label: '操作人员',
            prop: 'operatorName'
          },
          {
            label: '过站时间',
            prop: 'passedDateTime',
            hide: true
          }
        ]
      },
      passingStationLoading: false,
      passingStationData: [],
      passingStationPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      accessoriesInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '辅料类型',
            prop: 'indirectType',
            type: 'select',
            dicData: [
              {
                label: '锡膏',
                value: 'PACK_BARCODE'
              },
              {
                label: '胶水',
                value: 'GLUE_BARCODE'
              }
            ]
          },
          {
            label: '辅料批次',
            prop: 'indirectLotNo'
          },
          {
            label: '辅料条码',
            prop: 'indirectBarCode'
          },
          {
            label: '应用设备',
            prop: 'stationCode'
          }
        ]
      },
      accessoriesLoading: false,
      accessoriesData: [],
      accessoriesPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      equipmentInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: true,
        indexLabel: '序号',
        column: [
          {
            label: '设备类型',
            prop: 'equipmentType'
          },
          {
            label: '设备编码',
            prop: 'equipmentCode'
          },
          {
            label: '设备型号',
            prop: 'equipmentModel'
          },
          {
            label: '设备品牌',
            prop: 'equipmentBrand'
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'lineName'
          }
        ]
      },
      equipmentLoading: false,
      equipmentPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      equipmentData: [],
      inspectionInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '检验类型',
            prop: 'documentType'
          },
          {
            label: '检验单号',
            prop: 'documentNo'
          },
          {
            label: '检验时间',
            prop: 'examineDate'
          },
          {
            label: '报检数量',
            prop: 'inspectionQuantity'
          },
          {
            label: '检验数量',
            prop: 'examineQuantity'
          },
          {
            label: '检验人员',
            prop: 'examineBy'
          },
          {
            label: '检验结果',
            prop: 'examineResult'
          }
        ]
      },
      inspectionLoading: false,
      inspectionPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      inspectionData: [],
      maintenanceInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber',
            hide: true
          },
          {
            label: '不良登记时间',
            prop: 'ngCerateTime'
          },
          {
            label: '进维修时间',
            prop: 'incomingTime'
          },
          {
            label: '不良产出工序',
            prop: 'processRouteName'
          },
          {
            label: '不良现象',
            prop: 'ngPhenomenon'
          },
          {
            label: '不良原因',
            prop: 'ngReason'
          },
          {
            label: '维修人员',
            prop: 'maintainer'
          },
          {
            label: '维修结果',
            prop: 'results'
          }
        ]
      },
      maintenanceLoading: false,
      maintenanceData: [],
      testInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工序名称',
            prop: 'routeName',
            type: 'select',
            dicUrl: '/api/mes-product/apaasworkstation/workstation/list',
            props: {
              label: 'name',
              value: 'name'
            }
          },
          {
            label: '设备编码',
            prop: 'machineCode'
          },
          {
            label: '测试结果',
            prop: 'result',
            type: 'select',
            dicData: [
              {
                label: 'PASS',
                value: 'PASS'
              },
              {
                label: 'FAIL',
                value: 'FAIL'
              }
            ]
          },
          {
            label: '过站时间',
            prop: 'createTime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        ]
      },
      testLoading: false,
      testData: [],
      timer: new Date().getTime(), //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      usePartType: 'warehouseUsePart',
      warehouseUsePartOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: true,
        indexLabel: '序号',
        column: [
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          },
          {
            label: '物料型号',
            prop: 'partModel'
          },
          {
            label: '物料品牌',
            prop: 'materialBrand'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: 'D/C',
            prop: 'createTime'
          },
          {
            label: '发料数量',
            prop: 'issueQuantity'
          }
        ]
      },
      warehouseUsePartLoading: false,
      warehouseUsePartData: [],
      warehouseUsePartPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      assemblyKeyMaterialsOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: true,
        indexLabel: '序号',
        column: [
          {
            label: '类型',
            prop: 'partType'
          },
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          },
          {
            label: '物料型号',
            prop: 'partModel'
          },
          {
            label: '物料品牌',
            prop: 'materialBrand'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: 'D/C',
            prop: 'productionDate'
          },
          {
            label: '上料人员',
            prop: 'issuer'
          },
          {
            label: '上料时间',
            prop: 'issueTime'
          }
        ]
      },
      assemblyKeyMaterialsLoading: false,
      assemblyKeyMaterialsData: [],
      assemblyKeyMaterialsPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      SMTUsePartInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '用料工段/工序',
            prop: 'feedingType'
          },
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          },
          {
            label: '物料型号',
            prop: 'partModel'
          },
          {
            label: '物料品牌',
            prop: 'materialBrand'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: 'D/C',
            prop: 'productionDate'
          },
          {
            label: '上料人员',
            prop: 'issuer'
          },
          {
            label: '上料时间',
            prop: 'issueTime'
          },
          {
            label: '包装条码',
            prop: 'packBarCode'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          }
        ]
      },
      SMTUsePartInfoLoading: false,
      SMTUsePartInfoData: [],
      SMTUsePartInfoPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      dipKeyMaterialsOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: true,
        indexLabel: '序号',
        column: [
          {
            label: '用料工段/工序',
            prop: 'routeName'
          },
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          },
          {
            label: '物料型号',
            prop: 'partModel'
          },
          {
            label: '物料品牌',
            prop: 'materialBrand'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: 'D/C',
            prop: 'productionDate'
          }
        ]
      },
      dipKeyMaterialsLoading: false,
      dipKeyMaterialsData: [],
      dipKeyMaterialsPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      }
    };
  },
  watch: {
    activeName(val) {
      if (val === '序列号追溯') {
        let workOrderNoColumn = this.findObject(this.passingStationInfoOption.column, 'workOrderNo');
        workOrderNoColumn.hide = false;
        let passQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'passQuantity');
        passQuantityColumn.hide = true;
        let waitingQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'waitingQuantity');
        waitingQuantityColumn.hide = true;
        let passedDateTimeColumn = this.findObject(this.passingStationInfoOption.column, 'passedDateTime');
        passedDateTimeColumn.hide = false;
        let sequenceNumberColumn = this.findObject(this.maintenanceInfoOption.column, 'sequenceNumber');
        sequenceNumberColumn.hide = true;
      } else {
        let workOrderNoColumn = this.findObject(this.passingStationInfoOption.column, 'workOrderNo');
        workOrderNoColumn.hide = true;
        let passQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'passQuantity');
        passQuantityColumn.hide = false;
        let waitingQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'waitingQuantity');
        waitingQuantityColumn.hide = false;
        let passedDateTimeColumn = this.findObject(this.passingStationInfoOption.column, 'passedDateTime');
        passedDateTimeColumn.hide = true;
        let sequenceNumberColumn = this.findObject(this.maintenanceInfoOption.column, 'sequenceNumber');
        sequenceNumberColumn.hide = false;
      }
    },
    usePartType(val) {
      switch (val) {
        case 'warehouseUsePart':
          this.queryWarehouseUsePart();
          break;
        case 'assemblyKeyMaterials':
          this.queryAssemblyKeyMaterials();
          break;
        case 'SMTUsePartInfo':
          this.querySMTUseMaterials();
          break;
        case 'dipKeyMaterials':
          this.queryDipUseMaterials();
          break;
        default:
          break;
      }
    }
  },
  mounted() {},
  methods: {
    onSubmit() {
      if (this.activeName === '序列号追溯' && !this.sequenceNumber) {
        this.$message.warning('请输入序列号查询！');
        return;
      }
      if (this.activeName === '工单追溯' && !this.workOrderNo) {
        this.$message.warning('请输入工单号查询！');
        return;
      }
      this.queryWorkOrderInfo();
      this.queryDeliveryInfo();
      this.queryAssociationInfo();
      this.queryOverStationInfo();
      switch (this.usePartType) {
        case 'warehouseUsePart':
          this.queryWarehouseUsePart();
          break;
        case 'SMTUsePartInfo':
          this.querySMTUseMaterials();
          break;
        case 'dipKeyMaterials':
          this.queryDipUseMaterials();
          break;
        case 'assemblyKeyMaterials':
          this.queryAssemblyKeyMaterials();
          break;
        default:
          break;
      }
      this.queryAccessoryInfo();
      this.queryEquipmentInfo();
      this.queryMaintenanceInfo();
      this.queryInspectionInfo();
      this.queryMachineTestInfo();
    },
    queryWorkOrderInfo() {
      this.workOrderLoading = true;
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getWorkOrderInfo(params).then(
        (res) => {
          this.workOrderLoading = false;
          this.workOrderData = this._get(res, 'data.data', []);
        },
        (error) => {
          this.workOrderLoading = false;
          this.workOrderData = [];
        }
      );
    },
    queryDeliveryInfo() {
      this.deliveryLoading = true;
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getDeliveryInfo(1, 10000, Object.assign(params)).then(
        (res) => {
          this.deliveryLoading = false;
          this.deliveryData = this._get(res, 'data.data.records', []);
        },
        (error) => {
          this.deliveryLoading = false;
          this.deliveryData = [];
        }
      );
    },
    queryAssociationInfo() {
      if (this.activeName === '序列号追溯') {
        this.associationLoading = true;
        getAssociationInfo({ sn: this.sequenceNumber }).then(
          (res) => {
            this.associationLoading = false;
            this.associationData = this._get(res, 'data.data', []);
          },
          (error) => {
            this.associationLoading = false;
            this.associationData = [];
          }
        );
      }
    },
    queryOverStationInfo() {
      this.passingStationLoading = true;
      if (this.activeName === '序列号追溯') {
        getOverStationInfoBySn(
          this.passingStationPage.currentPage,
          this.passingStationPage.pageSize,
          Object.assign({ sn: this.sequenceNumber, objectType: 'OVER_STATION' })
        ).then(
          (res) => {
            const data = res.data.data;
            this.passingStationPage.total = data.total;
            this.passingStationData = data.records;
            // this._forEach(this.passingStationData, (item) => {
            //   let equipmentsList = JSON.parse(item.equipments);
            //   let equipments = [];
            //   this._forEach(equipmentsList, (obj) => {
            //     equipments.push(obj.code);
            //   });
            //   item.equipments = equipments.join(' | ');
            // });
            this.passingStationLoading = false;
          },
          (error) => {
            this.passingStationLoading = false;
            this.passingStationData = [];
          }
        );
      } else {
        getOverStationInfoByWorkOrderNo(
          this.passingStationPage.currentPage,
          this.passingStationPage.pageSize,
          Object.assign({ workOrderNo: this.workOrderNo, flag: true })
        ).then(
          (res) => {
            const data = res.data.data;
            this.passingStationPage.total = data.total;
            this.passingStationData = data.records;
            this._forEach(this.passingStationData, (item) => {
              item['processRouteName'] = item.routeName;
              item['processRouteType'] = item.routeType;
              item['productionLineName'] = item.lineName;
              item['workStationCode'] = item.equipmentCodes;
              item['workStationName'] = item.equipments;
              item['operatorName'] = item.operator;
            });
            this.passingStationLoading = false;
          },
          (error) => {
            this.passingStationLoading = false;
            this.passingStationData = [];
          }
        );
      }
    },
    passingStationCurrentChange(currentPage) {
      this.passingStationPage.currentPage = currentPage;
    },
    passingStationSizeChange(pageSize) {
      this.passingStationPage.pageSize = pageSize;
    },
    queryAccessoryInfo() {
      this.accessoriesLoading = true;
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getAccessoryInfo(this.accessoriesPage.currentPage, this.accessoriesPage.pageSize, Object.assign(params)).then(
        (res) => {
          const data = res.data.data;
          this.accessoriesPage.total = data.total;
          this.accessoriesData = data.records;
          this.accessoriesLoading = false;
        },
        (error) => {
          this.accessoriesLoading = false;
          this.accessoriesData = [];
        }
      );
    },
    passingStationCurrentChange(currentPage) {
      this.ccessoriesPage.currentPage = currentPage;
    },
    passingStationSizeChange(pageSize) {
      this.ccessoriesPage.pageSize = pageSize;
    },
    queryEquipmentInfo() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getEquipmentInfo(this.equipmentPage.currentPage, this.equipmentPage.pageSize, Object.assign(params)).then(
        (res) => {
          const data = res.data.data;
          this.equipmentPage.total = data.total;
          this.equipmentData = data.records;
          this.equipmentLoading = false;
        },
        (error) => {
          this.equipmentLoading = false;
          this.equipmentData = [];
        }
      );
    },
    equipmentCurrentChange(currentPage) {
      this.equipmentPage.currentPage = currentPage;
      this.queryEquipmentInfo();
    },
    equipmentSizeChange(pageSize) {
      this.equipmentPage.pageSize = pageSize;
      this.queryEquipmentInfo();
    },
    queryInspectionInfo() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getInspectionInfo(this.inspectionPage.currentPage, this.inspectionPage.pageSize, Object.assign(params)).then(
        (res) => {
          const data = res.data.data;
          this.inspectionPage.total = data.total;
          this.inspectionData = data.records;
          this.inspectionLoading = false;
        },
        (error) => {
          this.inspectionLoading = false;
          this.inspectionData = [];
        }
      );
    },
    equipmentCurrentChange(currentPage) {
      this.inspectionPage.currentPage = currentPage;
      this.queryInspectionInfo();
    },
    equipmentSizeChange(pageSize) {
      this.inspectionPage.pageSize = pageSize;
      this.queryInspectionInfo();
    },
    queryMaintenanceInfo() {
      if (this.activeName === '序列号追溯') {
        let params = {
          productSequenceNumber: this.sequenceNumber,
          objectType: 'REPAIR',
          traceType: 'FORWARD'
        };
        this.maintenanceLoading = true;
        getRepairInfoBySn(params).then(
          (res) => {
            this.maintenanceLoading = false;
            this.maintenanceData = this._get(res, 'data.data', []);
          },
          (error) => {
            this.maintenanceLoading = false;
            this.maintenanceData = [];
          }
        );
      } else {
        getRepairInfoByWorkOrderNo(1, 10000, { workOrderNo: this.workOrderNo }).then(
          (res) => {
            this.maintenanceLoading = false;
            this.maintenanceData = this._get(res, 'data.data.records', []);
          },
          (error) => {
            this.maintenanceLoading = false;
            this.maintenanceData = [];
          }
        );
      }
    },
    queryMachineTestInfo() {
      if (this.activeName === '序列号追溯') {
        this.testLoading = true;
        getMachineTestInfo({ sequenceNumber: this.sequenceNumber }).then(
          (res) => {
            this.testLoading = false;
            this.testData = this._get(res, 'data.data', []);
          },
          (error) => {
            this.testLoading = false;
            this.testData = [];
          }
        );
      }
    },
    equipmentDetailView(row) {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '详情',
        url: `/api/mes-abacus/production-trace/page-query-forward-trace-equipment-detail?equipmentCode=${row.equipmentCode}`,
        isPage: true,
        menu: false,
        editBtn: false,
        selection: false,
        readonly: true,
        tip: false,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '工装治具类型',
            prop: 'equipmentType',
            type: 'select',
            dicData: [
              {
                label: '飞达',
                vlaue: 'FEEDER'
              },
              {
                label: '飞达车',
                vlaue: 'FEEDERBUS'
              }
            ]
          },
          {
            label: '编码',
            prop: 'equipmentCode'
          },
          {
            label: '型号',
            prop: 'equipmentModel'
          }
        ]
      };
    },
    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    },
    queryWarehouseUsePart() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getWarehouseUsePart(this.warehouseUsePartPage.currentPage, this.warehouseUsePartPage.pageSize, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.warehouseUsePartPage.total = data.total;
        this.warehouseUsePartData = data.records;
        this.warehouseUsePartLoading = false;
      });
    },
    warehouseUsePartCurrentChange(currentPage) {
      this.warehouseUsePartPage.currentPage = currentPage;
      this.queryWarehouseUsePart();
    },
    warehouseUsePartSizeChange(pageSize) {
      this.warehouseUsePartPage.pageSize = pageSize;
      this.queryWarehouseUsePart();
    },
    warehouseUsePartDetailView(row) {
      this.$refs.commonModalTemplate.showModal();
      let params = {
        partNo: row.partNo
      };
      if (row.lotNo && row.lotNo != null) {
        params['lotNo'] = row.lotNo;
      }
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      this.tableOption = {
        modalTitle: '详情',
        url: '/api/mes-abacus/production-trace/page-query-forward/trace-warehouse-issue-material-detail',
        isPage: true,
        query: params,
        menu: false,
        editBtn: false,
        selection: false,
        readonly: true,
        tip: false,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '包装条码',
            prop: 'packBarCode'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          }
        ]
      };
    },
    dipKeyMaterialsDetailView(row) {
      this.$refs.commonModalTemplate.showModal();
      let params = {
        partNo: row.partNo,
        feedingType: row.feedingType,
        routeId: row.routeId
      };
      if (row.lotNo && row.lotNo != null) {
        params['lotNo'] = row.lotNo;
      }
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      this.tableOption = {
        modalTitle: '详情',
        url: '/api/mes-abacus/production-trace/page-query-forward/trace-dip-material-usage-detail',
        isPage: true,
        query: params,
        menu: false,
        editBtn: false,
        selection: false,
        readonly: true,
        tip: false,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '包装条码',
            prop: 'packBarCode'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '上料人员',
            prop: 'issuer'
          },
          {
            label: '上料时间',
            prop: 'issueTime'
          }
        ]
      };
    },
    queryAssemblyKeyMaterials() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      getAssemblyKeyMaterials(this.warehouseUsePartPage.currentPage, this.warehouseUsePartPage.pageSize, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.assemblyKeyMaterialsPage.total = data.total;
        this.assemblyKeyMaterialsData = data.records;
        this.assemblyKeyMaterialsLoading = false;
      });
    },
    assemblyKeyMaterialsCurrentChange(currentPage) {
      this.assemblyKeyMaterialsPage.currentPage = currentPage;
      this.queryAssemblyKeyMaterials();
    },
    assemblyKeyMaterialsSizeChange(pageSize) {
      this.assemblyKeyMaterialsPage.pageSize = pageSize;
      this.queryAssemblyKeyMaterials();
    },
    assemblyKeyMaterialsDetailView(row) {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '详情',
        url: `/api/mes-abacus/production-trace/page-query-forward/trace-assemble-key-material-detail?productComponentId=${row.productComponentId}`,
        isPage: true,
        menu: false,
        editBtn: false,
        selection: false,
        readonly: true,
        tip: false,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '子件SN',
            prop: 'subComponentSn'
          },
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          },
          {
            label: '物料型号',
            prop: 'partModal'
          }
        ]
      };
    },
    querySMTUseMaterials() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      params['feedingType'] = 'SMT';
      getSMTUseMaterials(this.SMTUsePartInfoPage.currentPage, this.SMTUsePartInfoPage.pageSize, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.SMTUsePartInfoPage.total = data.total;
        this.SMTUsePartInfoData = data.records;
        this.SMTUsePartInfoLoading = false;
      });
    },
    SMTUsePartInfoCurrentChange(currentPage) {
      this.SMTUsePartInfoPage.currentPage = currentPage;
      this.querySMTUseMaterials();
    },
    SMTUsePartInfoSizeChange(pageSize) {
      this.SMTUsePartInfoPage.pageSize = pageSize;
      this.querySMTUseMaterials();
    },
    queryDipUseMaterials() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params['sn'] = this.sequenceNumber;
      } else {
        params['workOrderNo'] = this.workOrderNo;
      }
      params['feedingType'] = 'ROUTE';
      getDipUseMaterials(this.dipKeyMaterialsPage.currentPage, this.dipKeyMaterialsPage.pageSize, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.dipKeyMaterialsPage.total = data.total;
        this.dipKeyMaterialsData = data.records;
        this.dipKeyMaterialsLoading = false;
      });
    },
    dipUseMaterialsCurrentChange(currentPage) {
      this.dipKeyMaterialsPage.currentPage = currentPage;
      this.queryDipUseMaterials();
    },
    dipUseMaterialsSizeChange(pageSize) {
      this.dipKeyMaterialsPage.pageSize = pageSize;
      this.queryDipUseMaterials();
    },
    toggleInfo(type) {
      this[type] = !this[type];
    },
    /**
     * 页面内定位表格
     */
    goToLocation(type) {
      console.log(type, $(type).offset().top);
      $('#avue-view').animate(
        {
          scrollTop: $(type).offset().top + $('#avue-view').scrollTop() - 110
        },
        500
      );
    },
    /**
     * 打开工单号选择模态框
     */
    openWorkOrderNoModal() {
      this.modalName = 'workOrderModal';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择工单号（双击进行选择）',
        url: '/api/mes-product/work-order/page',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true
          },
          {
            label: '生产工单',
            prop: 'orderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'orderType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '工单数量',
            prop: 'planQuantity'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: 'BOM版本',
            prop: 'bomVersion'
          },
          {
            label: '派工产线',
            prop: 'productionLineName'
          },
          {
            label: '计划开始时间',
            prop: 'planStartDate'
          },
          {
            label: '计划结束时间',
            prop: 'planEndDate'
          },
          {
            label: '制定人',
            prop: 'creatorName'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicData: [
              {
                label: '待排程',
                value: 1
              },
              {
                label: '待生产',
                value: 2
              },
              {
                label: '生产中',
                value: 3
              },
              {
                label: '完工',
                value: 4
              },
              {
                label: '锁定',
                value: 5
              },
              {
                label: '强制完工',
                value: 6
              }
            ]
          }
        ]
      };
    },
    /**
     * 选择模态框行数据
     */
    getSelectedRows(rowData) {
      if (this.modalName === 'workOrderModal') {
        this.workOrderNo = rowData.orderNo;
        this.onSubmit();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  height: 35px;
  .titleLeft {
    display: flex;
    align-items: center;
    .titleName {
      user-select: none;
      display: flex;
      align-items: center;
      cursor: pointer;
      .arrowRight {
        transform: rotate(0);
        transition: all 0.2s;
        &.arrowDown {
          transform: rotate(90deg);
          transition: all 0.2s;
        }
      }
    }
  }
  span {
    color: #0995bb;
  }
}
.box-card {
  position: fixed;
  top: 50%;
  right: 1%;
  width: 11%;
  min-width: 200px;
  translate: 0 -50%;
  // height: 70%;
  z-index: 9999;
  .catalogue {
    user-select: none;
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}
.box-card-hide {
  position: fixed;
  top: 30%;
  right: 1%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  z-index: 9999;
}
</style>
